Phase 4: Prototype Solutions 原型解決方案

目標：不是做最終產品，而是做“原型”（Prototype），讓設計師、使用者和利益相關者能直觀感受到產品的外觀與功能。

意義：

• 幫助測試使用者體驗的流程和功能。

• 提供反饋渠道，指導後續最佳化。

• 與測試階段緊密相連，二者相互交織。

資訊架構與網站地圖 Information Architecture & Sitemaps

資訊架構（IA）

設計師組織產品資訊的方式，使使用者能輕鬆理解和導航。

網站地圖（Sitemap）

高層級的結構圖，展示網站/應用的層次（Hierarchy）與順序（Sequence）。

• 層次：區分主要主題和次級主題，如“Shop → Denim/Pants”。

• 順序：使用者從首頁進入，逐級導航到更具體的內容。

示例（麵包店案例）：為了模擬電話下單的體驗，設計師在網站首頁直接放置“Place an Order”選項，就像店員打招呼後邀請顧客下單一樣。

線框圖 Wireframing

定義：產品的初步草圖，展示頁面佈局、元素位置和使用者操作路徑。

型別：

紙質線框圖（Paper Wireframes）

• 用線條、矩形、符號快速勾勒佈局。

• 優點：便宜、快速、易於迭代。

數字線框圖（Digital Wireframes）

• 使用設計工具（如 Figma、Adobe XD）。

• 通常用灰度、佔位文字（如 Lorem Ipsum）、幾何圖形表示。

原型 Prototype

低保真（Low-Fidelity, Lo-Fi）原型

• 簡單互動模型，基於線框圖組裝，能模擬頁面跳轉。

• 作用：在早期快速測試流程和使用者體驗，節省資源。

高保真（High-Fidelity, Hi-Fi）原型

• 接近最終產品的完整互動和內容表現。

• 提供更逼真的使用體驗，能獲得更細緻的反饋。

• 示例：Tee’s Shirts 網站的 hi-fi 原型 → 使用者和利益相關者能幾乎真實地體驗產品流程。

與測試的關係 Prototyping and Testing

原型階段和測試階段是相輔相成的：

• 原型用於模擬產品 → 測試則收集反饋和資料。

• 測試結果 → 反過來指導原型迭代。

• 設計師在評估原型時應回顧“定義階段”的問題陳述，例如：
  • Berta 是否能順利下單？
  • 網站是否給她帶來類似電話下單的親切感？

關鍵結論 Key Takeaways

1 設計思維五階段：共情 → 明確 → 創意 → 原型 → 測試。

2 原型階段的方法：

• 資訊架構（IA）

• 網站地圖（Sitemaps）

• 線框圖（紙質與數字）

• 低保真原型（Lo-Fi）

• 高保真原型（Hi-Fi）

3 原型的目標：不是最終產品，而是測試和反饋的載體。

4 原型和測試相互依賴，形成迴圈與迭代。